<template>
	<view class="content">
		<view class="header">
			<u-navbar 
			:border-bottom='false' 
			back-icon-color="#ffffff" 
			title-color="#ffffff" 
			:background="{background:'transparent'}" 
			back-text="" title="反向合约"></u-navbar>
			<view class="header_top">
				<view class="time">
					<view class="title">
						第{{formData.qishu || 0}}期
					</view>
					<view class="des">
						<countTime :date="endDate" @endTime="endTime"></countTime>
					</view>
				</view>
				<view class="money">
					<view class="title">
						第{{formData.qishu-1>0?formData.qishu-1:0}}期
					</view>
					<view class="des">
						{{formData.num || 0}}
					</view>
				</view>
			</view>
		</view>
		<view class="tag">
			<u-tabs 
			height="60"
			:active-item-style='active' 
			bg-color="transparent" 
			:list="list" 
			bar-width="50%" 
			inactive-color="rgba(94, 106, 252,0.8)"
			active-color="#ffffff" 
			:is-scroll="false" 
			:current="current" 
			@change="change"></u-tabs>
		</view>
		<view class="cont" v-show="current==0">
			<view class="number_title"></view>
			<scroll-view class="scroll-view_H" scroll-y="true">
			    <view class="number">
			    	<view 
			    	v-for="(item,index) in contractlist"
			    	:key="index"
			    	:class="{active:number_active==index}" 
			    	@click="numberClick(index)" 
			    	class="item">{{item}}</view>
			    	
			    </view>
			</scroll-view>
			<view class="submit">
				<view class="top">
					<view class="title">投注金额：</view>
					<view class="price">
						<view class="lable">
							{{(bili*price).toFixed(2)}}(预估盈利)+{{bili*100}}%(赢率)×
						</view>
						<u-input 
						placeholder="请输入金额" 
						placeholder-style="color:#5e6afc"
						v-model="price" 
						type="number" 
						height="30"
						:custom-style="inptStyle" />
						<view class="">
							USDT
						</view>
					</view>
					
				</view>
				<u-checkbox-group @change="checkChange">
					<u-checkbox v-model="isInsurance" shape="circle">是否购买保险</u-checkbox>
				</u-checkbox-group>
				<u-button :hair-line="btnBorder" class="submit_btn" type="success" @click="submit">确认投注</u-button>
			</view>
		</view>
		<!--历史开奖-->
		<view class="cont mt30" v-show="current==2">
			<scroll-view class="scroll-view_H_C" scroll-y="true" @scrolltolower="scrollBtm">
			    <view class="record_item" v-for="(item,index) in contractlogList" :key="index">
			    	<text>第{{item.qishu || 0}}期</text>
			    	<text>{{item.num || 0}}</text>
			    </view>
			    <view class="msg" :class="{order_null:contractlogList.length<=0}">
			    	<u-empty v-if="contractlogList.length<=0" text="暂无合约记录" mode="list"></u-empty>
			    	<u-loadmore :status="status" />
			    </view>
			</scroll-view>
		</view>
		<!--合约记录-->
		<view class="cont mt30" v-show="current==1">
			<scroll-view class="scroll-view_H_C" scroll-y="true" @scrolltolower="scrollBtm">
			    <view class="draw_item" v-for="(item,index) in drawlogList" :key="index">
			    	<view class="top">
			    		<view class="title">
			    			<text>合约第{{item.choose}}组</text>
			    			<image v-if="item.baoxian == 2" src="../../static/icon/baoxian.svg" mode=""></image>
			    		</view>
			    		<view>投注金额</view>
			    		<view>{{item.num}}</view>
			    	</view>
			    	<view class="btm">
			    		<text>第{{item.qishu || 0}}期</text>
			    		<text>盈亏</text>
			    		<text>{{item.status == 2?item.rewardusdt:item.status == 1?'未开奖':'流局'}}</text>
			    	</view>
			    </view>
			    <view class="msg" :class="{order_null:drawlogList.length<=0}">
			    	<u-empty v-if="drawlogList.length<=0" text="暂无开奖记录" mode="list"></u-empty>
			    	<u-loadmore :status="status" />
			    </view>
			</scroll-view>
		</view>
		<!--对话框-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import countTime from '../../component/countdown.vue'
	export default {
		components:{
			countTime
		},
		data() {
			return {
				btnBorder:false,
				inptStyle:{
					borderBottom:'1px solid #5e6afc',
					color:'#5e6afc'
				},
				active: {
					border: '1px solid #5e6afc',
					backgroundColor:'#5e6afc',
					borderRadius: '12rpx'
				},
				timestamp: 0,//秒
				list: [
					{name: '选择号码'}, 
					{name: '合约记录'}, 
					{name: '历史开奖'},
				],
				current: 0,
				price:'',//金额
				isInsurance:false,//是否购买保险
				number_active:0,
				formData:{},
				contractlogList:[],//合约记录列表
				drawlogList:[],//历史开奖列表
				page:1,//当前页码
				list_rows:15,//每页数量
				total:0,//数据总量
				status: 'loadmore',
				contractlist:[],//合约列表
				endDate:'',//结束时间
				bili:0,
				double:0,
				bdouble:0
			}
		},
		onReady() {
			
		},
		onLoad() {
			//获取系统信息
			this.getData()
			//获取合约列表
			this.getlist()
			//获取开奖信息
			this.getCont(false)
		},
		onPullDownRefresh(){
			//0,选择号码 1,合约记录 2,历史开奖
			if(this.current == 0){
				//获取系统信息
				this.getData()
				//获取合约列表
				this.getlist()
				//获取开奖信息
				this.getCont(false)
			}
			if(this.current == 2){
				this.page = 1
				this.contractlogList=[]
				//历史开奖
				this.contractlog()
			}
			if(this.current == 1){
				this.page = 1
				this.drawlogList = []
				//获取合约
				this.drawlog()
			}
		},
		onReachBottom(){
			
		},
		methods: {
			//购买保险状态改变
			checkChange(){
				if(!this.isInsurance){
					this.bili = this.double
				}else{
					this.bili = (this.double - this.bdouble).toFixed(2)
				}
			},
			//获取系统信息
			getData(){
				this.$http({
					url:this.$api.index_getAll,
					method:'POST',
					success:res=>{
						//console.log('成功返回---------',res)
						this.bdouble = res.data.fx_bx_bili
						this.double = res.data.fx_zj_bili
						this.bili = this.double
					},
					complete:e=>{
						uni.stopPullDownRefresh();
					}
				})
			},
			//上拉加载
			scrollBtm(){
				if(Math.ceil(this.total/this.list_rows)>this.page){
					this.page = this.page+1
					if(this.current == 2){
						this.contractlog()
					}
					if(this.current == 1){
						this.drawlog()
					}
				}else{
					
				}
			},
			endTime(e){
				//console.log(e)
				if(e.endTime){
					this.getCont(false)
				}
			},
			//获取合约列表
			getlist(){
				this.$http({
					url:this.$api.heyue_gethy,
					method:'POST',
					hideLoading:false,
					success:res=>{
						this.contractlist = res.data
					},
					fail:err=>{
						//console.log('失败返回------',err)
					}
				})
			},
			//确认投注
			submit(){
				if(!this.price && this.price<=0){
					this.$refs.uToast.show({
						title: '投注金额有误',
						type: 'error'
					})
					return
				}
				if(!this.number_active){
					this.$refs.uToast.show({
						title: '请选择合约号码',
						type: 'error'
					})
					return
				}
				this.loading = true
				this.$http({
					url:this.$api.contractlog_create,
					method:'POST',
					hideLoading:false,
					data:{num:this.price,baoxian:this.isInsurance?2:1,choose:this.number_active,type:2},
					success:res=>{
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success'
						})
					},
					complete:e=>{
						this.price = null
						this.number_active = null
						this.isInsurance = false
						this.loading = false
					}
					
				})
			},
			//获取历史开奖
			drawlog(){
				this.status = 'loading'
				this.$http({
					url:this.$api.drawlog_getAll,
					method:'POST',
					hideLoading:false,
					data:{
						page:this.page,
						list_rows:this.list_rows,
						zftype:2,
					},
					success:res=>{
						
						this.total = res.data.total
						if(Math.ceil(this.total/this.list_rows)<=this.page){
							this.status = 'nomore'
							
						}else{
							this.status = 'loadmore'
							
						}
						this.drawlogList = this.drawlogList.concat(res.data.data)
					},
					fail:err=>{
						
						this.status = 'nomore'
						//console.log('失败返回------',err)
					},
					complete:e=>{
						uni.stopPullDownRefresh();
						if(!e.code){
							
							this.status = 'nomore'
						}
					}
				})
			},
			//获取合约记录
			contractlog(){
				this.status = 'loading'
				this.$http({
					url:this.$api.kjdrawlog_getAll,
					method:'POST',
					hideLoading:false,
					data:{page:this.page,list_rows:this.list_rows,type:2},
					success:res=>{
						
						this.total = res.data.total
						if(Math.ceil(this.total/this.list_rows)<=this.page){
							this.status = 'nomore'
							
						}else{
							this.status = 'loadmore'
							
						}
						this.contractlogList = this.contractlogList.concat(res.data.data)
					},
					fail:err=>{
						
						this.status = 'nomore'
						//console.log('失败返回------',err)
					},
					complete:e=>{
						uni.stopPullDownRefresh();
						if(!e.code){
							
							this.status = 'nomore'
						}
					}
				})
			},
			//倒计时结束
			timeEnd(){
				//console.log('倒计时结束')
				this.getCont()
			},
			//获取基本信息
			getCont(e){
				this.$http({
					url:this.$api.kjdrawlog_kaijing,
					method:'POST',
					hideLoading:e,
					success:res=>{
						this.formData = res.data
						// console.log(new Date(res.data.nextkj)<=new Date())
						if(new Date(res.data.nextkj)<=new Date()){
							setTimeout(()=>{
								this.getCont(true)
							},2000)
						}else{
							this.endDate = res.data.nextkj
						}
					},
					complete:e=>{
						uni.stopPullDownRefresh();
					}
				})
			},
			//选择合约号
			numberClick(e){
				this.number_active = e
			},
			//切换tag
			change(index) {
				this.current = index;
				if(index == 2){
					this.page = 1
					this.contractlogList=[]
					this.contractlog()
				}
				if(index == 1){
					this.page = 1
					this.drawlogList = []
					this.drawlog()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.header{
			background:url(../../static/zz.png)center/cover no-repeat;
			.header_top{
				text-align: center;
				padding: 30rpx 0 40rpx 0;
				box-shadow: 0 5rpx 5rpx rgba(62,9,149,1);
				color: #ffffff;
				display: flex;
				>view{
					width: 50%;
					.title{
						color:#999999;
					}
					.des{
						font-weight: 600;
						font-size: 18px;
					}
					
				}
				
			}
			
		}
		.tag {
			margin: 44rpx 27rpx 0 27rpx;
			border: 1px solid rgba(94, 106, 252,0.5);
			border-radius: 15rpx;
		}
		.number_title{
			font-size: 20px;
			font-weight: 600;
			color: #FFFFFF;
			text-align: center;
			margin-top: 30rpx;
		}
		.scroll-view_H{
			box-shadow:inset 0px -15px 20px -15px rgba(238,204,141,0.3);
		}
		.number{
			display: flex;
			height: calc(100vh - 800rpx);
			justify-content: space-between;
			flex-wrap: wrap;
			margin: 26rpx 27rpx;
			
			.item{
				background: url(../../static/hybk.png)center/cover no-repeat;
				width: 22%;
				height: 86rpx;
				text-align: center;
				line-height: 86rpx;
				margin-bottom: 20rpx;
				position: relative;
				
			}
			.active{
				border: 2px solid rgb(94, 106, 252);
				border-radius: 10rpx;
			}
		}
		.submit{
			margin: 10rpx 27rpx 0 27rpx;
			color: #ffffff;
			.top{
				
				padding: 20rpx 0;
				.title{
					width: 170rpx;
					
				}
			}
			.price{
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
			}
			.submit_btn{
				background-color: #5c67ff;
				color: #ffffff;
				margin: 30rpx 0;
				border-color: $border-bottom-color;
				font-size: 20px;
				font-weight: 600;
			}
		}
		.record_item{
			display: flex;
			justify-content: space-between;
			color: #FFFFFF;
			padding: 20rpx;
			margin: 0 30rpx;
			border-bottom: 1px solid $border-bottom-color;
			>text:nth-child(1){
				color: #5c67ff;
				
			}
			>text:nth-child(2){
				font-size: 16px;
				
			}
		}
		.draw_item{
			margin: 0 30rpx;
			padding: 20rpx;
			border-bottom: 1px solid $border-bottom-color;
			>view{
				display: flex;
				justify-content: space-between;
				padding: 10rpx;
				image{
					width: 40rpx;
					height: 40rpx;
				}
				text,view{
					font-size: 12px;
					
				}
				text:nth-child(1),.title{
					width: 50%;
				}
			}
			.top{
				color: #ffffff;
				
				text:nth-child(2){
					color: #5c67ff;
				}
				.title{
					position: relative;
					display: flex;
					align-items: center;
					text{
						width: auto;
					}
				}
				
			}
			.btm{
				color: #5c67ff;
				text:nth-child(3){
					color: #ffffff;
				}
			}
		}
		.mt30{
			margin-top: 30rpx;
		}
		.msg{
			padding: 20rpx;
		}
		.order_null{
			position: fixed;
			left: 0%;
			top: 50%;
			width: 100%;
		}
		::v-deep .u-checkbox__label{
			color: #FFFFFF;
		}
		.scroll-view_H_C{
			height: 65vh;
		}
	}
</style>
